<template>
    <el-row>
    <el-col :span="6">
        <div class="input">
            <diySelect :optionData="optionData" @choose="choose" :propsValue="selectValue" size="medium"></diySelect>
            <el-input size="30px" v-model="input" :placeholder="placeholderMessage"></el-input>
            <el-button icon="el-icon-search" class="circle" circle @click="searchName"></el-button>
        </div>
    </el-col>
    </el-row>
</template>

<script>
    import {mapActions} from 'vuex'
    import diySelect from '../../components/public/diySelect'
    export default {
        name: "Search",
        components:{diySelect},
        data(){
            return {
                optionData: [
                    {value: '订货单', label: '搜订货单'},
                    {value: '退货单', label: '搜退货单'},
                    {value: '商品', label: '搜商品'},
                    ],
                selectValue: '',
                input:"",
                placeholderMessage:'',
            }
        },
        created(){
        },
        computed:{
        },
        methods:{
            ...mapActions(['routerFun',"queryGoodsName"]),
            choose(val){
                //this.$emit('changeNum')
                this.selectValue = val
                if(val==="订货单"){
                    this.placeholderMessage = '请输入订货单号'
                } else if(val ==="退货单"){
                    this.placeholderMessage = '请输入退货单号'
                }else if(val ==="商品"){
                    this.placeholderMessage = '请输入商品名称'
                }
            },
            searchName(){
                if(this.input !== ''){
                    this.$store.state.selectValue = this.input //将数据传入vuex方便其他页面使用
                    //this.$emit('changeNum')
                    let obj = {path:'',name:''}//此处路由不要随意更改，有问题联系杨光兴。
                    if(this.selectValue==="订货单"){
                        obj.path = '/Main/Order/PurchaseOrder'
                        obj.name = '订货单'
                        this.$router.push('/Main/Order/PurchaseOrder')
                    }else  if(this.selectValue==="退货单"){
                        obj.path = '/Main/Order/ReturnsOrder'
                        obj.name = '退货单'
                        this.$router.push('/Main/Order/ReturnsOrder')
                    }else {
                        let name =this.input
                        this.queryGoodsName(name)
                        obj.path = '/Main/Goods/GoodsList'
                        obj.name = '商品列表'
                        this.$router.push('/Main/Goods/GoodsList')
                    }
                    this.routerFun(obj)
                }else {
                    this.$message({
                        type: 'error',
                        message: '请输入查询信息！'
                    });
                }
            }
        }
    }
</script>

<style scoped>
    .thisDiv{
        height: 2.4rem;
        outline: 1px solid red;
    }
    .el-form-item{
        /*margin:11px auto;*/
    }
    .el-input {
        width: auto;
    }
    .el-select{
        width:10rem;
        float: left;
    }
    .el-input[data-v-069a63e6]{
        width: 15rem;
        border: none;
        float: left;
    }
   .circle{
       position: absolute;
       right: 0;
   }
   .input{
       position:  relative;
       width: 25rem;
   }
    .el-input__inner:hover{
        cursor: pointer;
    }
    .el-button.is-circle{
        border: none;
    }
    [class*=" el-icon-"], [class^=el-icon-]{
        font-weight:bolder;
    }
</style>